<template>
  <div class="menu-item" v-if="!menuInfo.hidden">
    <!-- 是否有子集并且hidden不为true 有则循环自己 -->
    <el-submenu
      :index="menuInfo.name"
      v-if="menuInfo.children && menuInfo.children.length"
    >
      <template slot="title">
        <i :class="menuInfo.icon" class="mr-10"></i>
        <span>{{ menuInfo.title }}</span>
      </template>
      <menuItem
        v-for="item in menuInfo.children"
        :key="item.name"
        :menuInfo="item"
        class="menuItem"
      />
    </el-submenu>
    <!-- 没有子集 -->
    <el-menu-item
      :class="isActive ? 'isActive' : ''"
      :index="menuInfo.name"
      v-else
      @click="routerTo"
    >
      <i :class="menuInfo.icon" class="mr-10"></i>
      <span slot="title">{{ menuInfo.title }}</span>
    </el-menu-item>
  </div>
</template>

<script>
export default {
  name: "menuItem",
  props: {
    menuInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isActive: false
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(val) {
        const name = val.meta.menuName || val.name;
        if (name === this.menuInfo.name) {
          this.isActive = true;
        } else {
          this.isActive = false;
        }
      }
    }
  },
  methods: {
    // 路由跳转
    routerTo() {
      if (this.$route.name === this.menuInfo.name) return;
      this.$router.push({ name: this.menuInfo.name });
    }
  }
};
</script>

<style lang="scss">
.menu-item .isActive {
  i {
    color: $primary !important;
  }
  color: $primary !important;
}
</style>
